<template>
	<view class="container">
		<view class="container-body1">
			<!-- 挂号 -->
			<view class="card" v-for="(item,index) in typeList.registrations">
				<view class="tab" >
					<h3 style=" font-size: 18px; margin-left:10rpx; margin-top: 10rpx;">收费详情</h3>
					<view style="display: flex;flex-direction: row;align-items: flex-end;">
						<h5 style=" font-size: 17px; margin-left:10rpx; margin-top: 10rpx;">项目名称：挂号</h5>
						<p>{{item.name}}</p>
					</view>
					<view style="display: flex;flex-direction: row;align-items: flex-end;">
						<h5 style=" font-size: 17px; margin-left:10rpx; margin-top: 10rpx;">开项科室：</h5>
					<p>{{item.deptName}}</p>
					</view>
					<view style="display: flex;flex-direction: row;align-items: flex-end;">
						<h5 style=" font-size: 17px; margin-left:10rpx; margin-top: 10rpx;">费用：</h5>
						<p style="color: blue;">¥{{item.price}}</p>
					</view>
					<view
						style="width: 100%;height:auto;display: flex; flex-direction:row; justify-content: center; align-items: flex-end; margin-top: 10px;">
						<el-button type="primary" style="width: 50%;" @click="openPay1(item)">缴费</el-button>
					</view>
				</view>
			</view>
			<view class="container-body2">
			<!-- 处方 -->
			<view class="card" v-for="(item,index) in typeList.prescriptions">
				<view class="tab" >
					<h3 style=" font-size: 18px; margin-left:10rpx; margin-top: 10rpx;">收费详情</h3>
					<view style="display: flex;flex-direction: row;align-items: flex-end;">
						<h5 style=" font-size: 17px; margin-left:10rpx; margin-top: 10rpx;">项目名称：处方</h5>
						<p>{{item.name}}</p>
					</view>
					<view style="display: flex;flex-direction: row;align-items: flex-end;">
						<h5 style=" font-size: 17px; margin-left:10rpx; margin-top: 10rpx;">开项科室：</h5>
					<p>{{item.deptName}}</p>
					</view>
					<view style="display: flex;flex-direction: row;align-items: flex-end;">
						<h5 style=" font-size: 17px; margin-left:10rpx; margin-top: 10rpx;">费用：</h5>
						<p style="color: blue;">¥{{item.totalPrice}}</p>
					</view>
					<view
						style="width: 100%;height:auto;display: flex; flex-direction:row; justify-content: center; align-items: flex-end; margin-top: 10px;">
						<el-button type="primary" style="width: 50%;" @click="openPay2(item)">缴费</el-button>
					</view>
				</view>
				</view>
			<!-- 检查项目 -->
			<view class="container-body3">
			<view class="card" v-for="(item,index) in typeList.diagReports">
				<view class="tab" >
					<h3 style=" font-size: 18px; margin-left:10rpx; margin-top: 10rpx;">收费详情</h3>
					<view style="display: flex;flex-direction: row;align-items: flex-end;">
						<h5 style=" font-size: 17px; margin-left:10rpx; margin-top: 10rpx;">项目名称：{{item.diagItemName}}</h5>
						<p>{{item.name}}</p>
					</view>
					<view style="display: flex;flex-direction: row;align-items: flex-end;">
						<h5 style=" font-size: 17px; margin-left:10rpx; margin-top: 10rpx;">开项科室：</h5>
					<p>{{item.deptName}}</p>
					</view>
					<view style="display: flex;flex-direction: row;align-items: flex-end;">
						<h5 style=" font-size: 17px; margin-left:10rpx; margin-top: 10rpx;">费用：</h5>
						<p style="color: blue;">¥{{item.price}}</p>
					</view>
					<view
						style="width: 100%;height:auto;display: flex; flex-direction:row; justify-content: center; align-items: flex-end; margin-top: 10px;">
						<el-button type="primary" style="width: 50%;" @click="openPay3(item)">缴费</el-button>
					</view>
				</view>
			</view>
			</view>
			</view>
		</view>

	</view>
	
	  <el-dialog
	    v-model="payValue"
	    title="缴费"
	    width="300"
		height="200"
	  >
		<div style="height: 100%; width:100% ; display: flex; justify-content: center; align-items:center; flex-direction: column;">
		<view style="width: 100%; height: 100%; display: flex; flex-direction: column;">
			<p>收费项目：{{subject.name}}</p>
			<p>收费单位：某某医院</p>
			<view style="display: flex; flex-direction: row;">
				<p>价格：</p>
				<p>{{subject.money}}</p>
			</view>
			<view style="display: flex; flex-direction: row; margin-top: 30rpx; width: 100%; justify-content: space-around;">
				<el-button type="primary" @click="payMoney">缴费</el-button>
				<el-button type="warning" @click="payValue=false">取消</el-button>
			</view>
		</view>
		</div>
	  </el-dialog>
	
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import axiosInstance from '@/Config/axiosConfig'
	import globalStore from '@/store/GlobalStore';
	import Emessage from '@/Utils/Message';
	import { onMounted } from 'vue'
	const payValue=ref(false)
	const subject=ref();
	onMounted(() => {
		getSubjects()
	})

	const typeList = ref([1, 2, 3]);
	const getSubjects = async () => {
		const response = await axiosInstance.get("/patient/getAllPay?id="+globalStore.patientid);
		if (response.data.code == 200) {typeList.value = response.data.data;}
		else Emessage("网络问题", "warning");
	}
	const goPay=()=>{
		payValue.value=false;
	}
	const openPay1=async(item)=>{
		const response=await axiosInstance.get('/patient/addQueue?id='+item.id);
		if(response.data.code==200)Emessage("缴费成功","success");
		
		else Emessage("缴费失败","error");
		getSubjects()
	}
	const openPay2=async(item)=>{
	const response1=await axiosInstance.post('/patient/getDiagId',{doctorId:0,patientId:globalStore.patientid})
	if(response1.data.code==200){
		for(let i=0;i<response1.data.data.length;i++){
			const response=await axiosInstance.post('/cashier/chargeConfirmByDiagId',{diagId:response1.data.data[i]});
			if(response.data.code==200)Emessage("缴费成功","success");
			else Emessage(response.data.message,"error");
			getSubjects()
			}
		}
	
	}
	const openPay3=async(item)=>{
	const response=await axiosInstance.post('/cashier/chargeConfirmByDiagId',{diagId:item.id});
		if(response.data.code==200)Emessage("缴费成功","success");
		else Emessage("缴费失败","error");
		getSubjects()
	}
	const payMoney=()=>{
		
	}
</script>

<style>
	.container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.container-title {
		width: 100%;
		height: 20%;
		display: flex;
		flex-direction: row;
		justify-items: center;

	}

	.container-body1 {
		width: 100%;
		height: 33%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 10rpx;
	}
	.container-body2 {
		width: 100%;
		height: 33%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 10rpx;
	}
	.container-body3 {
		width: 100%;
		height: 33%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 10rpx;
	}

	.card {
		border-radius: 30rpx;
		border: 2px solid gainsboro;
		margin: 10rpx;
		width: 45%;
		height: 350rpx;
		display: flex;
		flex-direction: column;
		margin-bottom: 10rpx;
	}

	.tab {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.img1 {
		border-radius: 20rpx;
		width: 150rpx;
		height: 100rpx;
		margin-right: 10rpx;
		margin-top: 20rpx;
		margin-left: 10rpx;
	}

	.name {
		display: flex;
		height: 100%;
		width: 60%;
		margin: auto;

		align-items: center;
		justify-content: center;
	}
</style>